<template>
	<view id="productDetail" selectable="true" style="-webkit-user-select: text;">
		<me-tabs class="dataBar" v-model="tabIndex" :activeClass="true" :tabs="obj.isHaveBankActivity==1?tabList2:tabList" @change="tabChange"></me-tabs>
		<!-- <me-tabs v-if="obj.isHaveBankActivity==1 && tabIndex == 2" class="dataBar" nameKey="bankName" v-model="tabIndex2" :tabs="bankList" @change="tabChange2"></me-tabs> -->
		<u-tabs :current="tabIndex2" v-if="obj.isHaveBankActivity==1 && tabIndex == 2" font-size="28" active-color="#39ACFF" bar-width="100" :list="bankList" name="bankName"  @change="tabChange2"></u-tabs>
		<view class="content richBox" v-show='obj.zcontent && tabIndex == 0'>
			<image class="bg"  :src="obj.bgImge" alt="" />
			<view class="rich" v-html='obj.zcontent'></view>
		</view>
		<view class="content richBox"  v-show='obj.content && tabIndex == 1'>
			<image class="bg"  :src="obj.bgImge" alt="" />
			<view class="rich" v-html='obj.content'></view>
		</view>
		<view class="content richBox richBox2"  v-show='obj2.content && tabIndex == 2'>
			<image class="bg"  :src="obj2.bgImg" alt="" />
			<view class="rich" v-html='obj2.content'></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:['产品政策','产品信息'],
				tabList2:['产品政策','产品信息','银行活动'],
				tabIndex:0,
				tabIndex2:0,
				obj:'',
				obj2:{},
				id:'',
				bankId:'',
				title:'',
				bankList:[]
			}
		},
		onLoad(option) {
			this.id=option.id
			uni.setNavigationBarTitle({
			    title: option.name
			})
			this.getDetail()
			this.getBankList()
		},
		methods: {
			tabChange(e){
				if(e==2){
					this.bankId=this.bankList[0].id
					this.getBankActiveDetail()
				}
			},
			tabChange2(e){
				this.tabIndex2=e
				this.bankId=this.bankList[e].id
				this.getBankActiveDetail()
			},
			getBankList(){
				this.httpClient.post('system/bank/getAllBank', {
					id:this.id
				},true).then(res=>{
					if(res.code==200){
						this.bankList=res.data
						console.log('this.bankList: ', this.bankList)
					}
				})
			},
			getDetail(){
				this.httpClient.post('stock/manageApp/product/detail', {
					id:this.id
				},true).then(res=>{
					if(res.code==200){
						this.obj=res.data
						uni.setNavigationBarTitle({
						    title: res.data.abbreviation
						})
					}
				})
			},
			getBankActiveDetail(){
				this.httpClient.post('stock/app/bankActivity/getInfoByProductIdAndBankId', {
					productId:this.id,
					bankId:this.bankId,
				},true).then(res=>{
					if(res.code==200){
						this.obj2=res.data
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.dataBar{
		margin-bottom:6rpx;
	}
	#productDetail{
		position:relative;height:100%;width:100%;
		.content{
			background: #FFF;
			margin-top:10rpx;
			padding:0;
			img{
				width: 100% !important;
			}
			/deep/ img{
			      width: 100%;
			      vertical-align: middle;
			    }
			
		}
		.richBox{
			.bg{
			    position: absolute;
			    width: 100%;
			    height: 100%;
			}
			.rich{
				margin: 20rpx;
				position: absolute;
				top:100rpx;
				max-width: 100%;
				bottom: 0;
				overflow-y: auto;
				background: #FFF;
				color: #333;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}
		}
		.richBox2{
			width: 100%;
			.rich{
				width: 710rpx !important;
				box-sizing: border-box;
				top:200rpx;
			}
		}
	}
</style>
